<template>
	<view class="uni-main">
		<view class="uni-header">
			<view class="uni-group">
			</view>

			<view class="uni-group">
				<input class="uni-search" type="text" v-model="query" @confirm="search" placeholder="请输入手机号码" />
				<button class="uni-button" type="default" size="mini" @tap="search">搜索</button>
			</view>
		</view>

		<view class="uni-container uni-compatible">
			<unicloud-db ref="udb" collection="wmz-entitlement-aftersale" page-data="replace"
				v-slot:default="{data, pagination, loading, error, options}" :field="field" :where="where"
				:orderby="orderBy" :getcount="true" :page-size="options.pageSize" :page-current="options.pageCurrent"
				:options="options">
				<uni-table :loading="loading" :emptyText="error.message || '没有更多数据'" border type="selection"
					@selection-change="selectionChange">
					<uni-tr>
						<uni-th align="center">手机号码</uni-th>
						<uni-th align="center">描述</uni-th>
						<uni-th align="center">类别</uni-th>
						<uni-th align="center">创建时间</uni-th>
						<!-- <uni-th width="204" align="center">操作</uni-th> -->
					</uni-tr>

					<uni-tr v-for="(item, index) in data" :key="index">
						<uni-td align="center"> {{ item.mobile}} </uni-td>
						<uni-td align="center"> {{ item.desc}} </uni-td>
						<uni-th align="center">
							<text v-if="item.type===1">联系充值</text>
							<text v-if="item.type===2">疑问咨询</text>
							<text v-if="item.type===3">我要退款</text>
							<text v-if="item.type===4">其他</text>
						</uni-th>
						<uni-td align="center">
							<uni-dateformat :date="item.create_time" :format="'yyyy-MM-dd hh:mm:ss'" />
						</uni-td>
						<!-- <uni-td align="center">
							<view class="uni-group">
								<button @tap="edit(true, item._id)" class="uni-button" size="mini"
									type="primary">退款</button>
							</view>
						</uni-td> -->
					</uni-tr>
				</uni-table>

				<view class="uni-pagination-box">
					<uni-pagination show-icon :page-size="pagination.size" v-model="pagination.current"
						:total="pagination.count" @change="onPageChanged" />
				</view>
			</unicloud-db>
		</view>

	</view>
</template>

<script>
	const db = uniCloud.database()
	const dbOrderBy = 'create_time desc';
	const dbSearchFields = ["mobile"];
	const pageSize = 10;
	const pageCurrent = 1;

	let _this;
	export default {
		data() {
			return {
				field: 'desc,mobile, create_time,type',
				query: '',
				where: '',
				orderBy: dbOrderBy,
				selectedIndex: [],
				options: {
					pageSize,
					pageCurrent
				}
			};
		},
		onLoad() {
			_this = this;
		},
		onShow() {
			this.loadData(true)
		},
		methods: {
			getWhere() {
				const query = _this.query.trim();
				if (!query) {
					return '';
				}
				const queryRe = new RegExp(query, 'i');
				return dbSearchFields.map(name => queryRe + '.test(' + name + ')').join(' || ');
			},
			search() {
				_this.where = '';
				const newWhere = _this.getWhere();
				if (newWhere) {
					_this.where = newWhere;
				}
			},
			clear() {
				_this.selShop = '';
				_this.query = '';
				_this.search();
			},
			loadData(clear = true) {
				if (_this.$refs.udb) {
					_this.$refs.udb.loadData({
						clear
					});
				}
			},
			onPageChanged(e) {
				_this.$refs.udb.loadData({
					current: e.current
				});
			},
			selectionChange(e) {
				_this.selectedIndex = e.detail.index;
			}
		}
	};
</script>